<template>
  <div class="menu-manage-view">
    <div class="options-view">
      <el-button type="primary" link @click="openAddDialog">添加菜单</el-button>
    </div>
    <div class="tabel-view">
      <el-table :data="tableData" style="width: 100%" row-key="id" border>
        <el-table-column prop="id" label="ID" width="100" />
        <el-table-column prop="name" label="菜单名称" width="120" />
        <el-table-column prop="icon" label="图标" width="60">
          <template #default="{ row }">
            <el-icon :size="20" color="#409eff">
              <component :is="row.icon" />
            </el-icon>
          </template>
        </el-table-column>
        <el-table-column prop="path" label="菜单路径" width="250" />
        <el-table-column prop="svg" label="网站图标" width="100">
          <template #default="{ row }">
            <el-image v-if="row.svg" :src="baseUrl + row.svg" lazy fit="cover" />
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="网站名称" width="120" />
        <el-table-column prop="father" label="上级ID" width="80" />
        <el-table-column prop="sort" label="排序" width="60" />
        <el-table-column prop="options" label="操作" width="200">
          <template #default="{ row }">
            <el-button type="primary" link size="small" @click="openEditDialog(row)">编辑</el-button>
            <el-button type="danger" link size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <AddDialogView ref="addDialog" :fatherList="fatherList" @init="init" />
  <EditDialogView ref="editDialog" :fatherList="fatherList" @init="init" />
</template>

<script setup>
const baseUrl = ref(import.meta.env.VITE_APP_BASE_API);
import api from "@/api";
import { ref, onMounted } from "vue";
import AddDialogView from "./components/add-dialog-view.vue";
import EditDialogView from "./components/edit-dialog-view.vue";
const addDialog = ref(null);
const editDialog = ref(null);

const menus = ref([]);
const tableData = ref([]);
const fatherList = ref([]);

const initMenus = async () => {
  const res = await api.menus.getMenus();
  menus.value = res.menus;
};

const initTableData = () => {
  let fathers = menus.value.filter((f) => f.father == 0);
  fatherList.value = [
    {
      id: 0,
      name: "无",
      path: "",
    },
    ...fathers,
  ];
  console.log(fatherList.value)
  const childrens = menus.value.filter((f) => f.father != 0);
  for (let index = 0; index < fathers.length; index++) {
    fathers[index].children = [];
    fathers[index].children = childrens.filter(
      (c) => c.father == fathers[index].id
    );
  }
  tableData.value = fathers;
  console.log(tableData.value);
};

const openAddDialog = () => {
  addDialog.value.showIt();
};

const openEditDialog = (row) => {
  editDialog.value.showIt(row);
};

const init = async () => {
  await initMenus();
  initTableData();
};

onMounted(async () => {
  init();
});
</script>

<style scoped>
.menu-manage-view {
  width: 100%;
  height: 100%;
}

.options-view {
  width: 100%;
  height: 60px;
  padding-left: 12px;
  border-radius: 8px;
  display: flex;
  justify-content: start;
  align-items: center;
  background: #ffffff;
  border: 1px solid #e6e6e6;
}

.tabel-view {
  width: 100%;
  height: calc(100% - 70px);
  border-radius: 8px;
  margin-top: 10px;
  padding: 10px;
  background: #ffffff;
  border: 1px solid #e6e6e6;
}
</style>
